<template>
  <div class="app-container">
    <el-table :data="insuranceData">
      <el-table-column label="险种类别编码" prop="categoryCode"></el-table-column>
      <el-table-column label="险种类别说明" prop="categoryTxt"></el-table-column>
      <el-table-column label="所需资金额度" prop="requiredAmount"></el-table-column>
      <el-table-column label="已有保障额度" prop="existAmount"></el-table-column>
      <el-table-column label="缺口额度" prop="gap"></el-table-column>
    </el-table>

    <div class="btn">
      <el-button @click="prodRecommend" type="primary">产品推荐</el-button>
    </div>

    <el-table :data="productData" v-show ="productData.length > 0" >
      <el-table-column label="产品编码" prop="productCode"></el-table-column>
      <el-table-column label="产品名称" prop="productName"></el-table-column>
      <el-table-column label="产品所属保险公司" prop="providerCompany"></el-table-column>
      <el-table-column label="产品说明" prop="productInfo"></el-table-column>
    </el-table>
  </div>
</template>
<script setup name="Product">
import { productRecommend } from '@/api/safeguard/index.js';
const route = useRoute();

const {
    categoryCode,
    categoryTxt,
    requiredAmount,
    existAmount,
    gap,
} = route.query

const insuranceData = ref([
  {
    categoryCode: categoryCode,
    categoryTxt: categoryTxt,
    requiredAmount: requiredAmount,
    existAmount: existAmount,
    gap: gap,
  }
])

const productData = ref([])

function prodRecommend () {
  const data = {
    categoryCode: categoryCode,
    categoryTxt: categoryTxt,
    requiredAmount: requiredAmount,
    existAmount: existAmount,
    gap: gap,
  }
  productData.value = []
  productRecommend(data).then(res => {
    productData.value.push(res.data)
  })
}
</script>
<style lang="scss" scoped>
  .app-container {
    .btn {
        text-align: center;
        margin: 24px;
      }
  }
</style>
